import type { MenuProps } from 'antd'
import React from 'react'
type MenuItem = Required<MenuProps>['items'][number]

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group'
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type
  } as MenuItem
}

const MenuItem = [
  { label: '第一个demo', value: 'first-demo' },
  { label: '星星DEMO', value: 'star' },
  { label: '基本形状', value: 'basic-shapes' },
  { label: '自定义形状', value: 'custom-shape' },
  { label: '图片', value: 'images' },
  { label: '过滤器', value: 'filters' },
  { label: '拖放', value: 'drag-drop' },
  { label: 'konva节点', value: 'konva-node' },
  { label: '变形', value: 'transformer' },
  { label: 'group组(递归)', value: 'group-recursion' },
  { label: 'group组(嵌套)', value: 'group-nest' },
  { label: 'group组(异步更新)', value: 'group-async-update' },
  { label: '简单动画', value: 'simple-animations' },
  { label: '复杂动画', value: 'complex-animations' },
  { label: 'DOM传送门', value: 'dom-portal' },
  { label: 'Canvas传送门', value: 'canvas-portal' },
  { label: '导出', value: 'canvas-export' },
  { label: '撤回重做', value: 'undo-redo' },
  { label: '修改zindex', value: 'zindex' },
  { label: '图片拖入画布', value: 'drop-image' },
  { label: '自由绘画', value: 'free-drawing' },
  { label: '自由绘画-手写板支持', value: 'free-drawing-tablet' },
  { label: '自由绘画-变形-保存到元素', value: 'free-drawing-transformer' },
  { label: '自由绘画-变形-逆向处理', value: 'free-drawing-transformer-reverse' },
  { label: '自由绘画-限制绘画区域', value: 'free-drawing-limit' },
  { label: 'Canvas编辑器', value: 'canvas-editor' },
  { label: '简单截取', value: 'simple-clip' },
  { label: '方形选区', value: 'rect-select' },
  { label: '遮罩层', value: 'mask' },
  { label: '画布缩放', value: 'canvas-zoom' },
  { label: '拾色器', value: 'color-pipette' },
  { label: '画笔组拖动', value: 'group-line-drag' },
  { label: '移动选择工具-自动选择', value: 'auto-select' },
  { label: '快捷键切换变形模式', value: 'shortcut-transformer' },
  { label: '组拖动-停止拖动', value: 'group-stop-drag' }
]

const items = MenuItem.map(element => {
  return getItem(element.label, `/${element.value}`)
})

export { getItem, items, MenuItem }
